<style lang="scss" scoped>
    .header {
        background-color:white;
        padding: 0px;
        height: 72px;
    }
    /* 创建三个不相等的列 */
    .column {
        float: left;
        padding: 0;
    }
    /* 左右两侧宽度 */
    .column.side {
        width: 10vw;
    }
    /* 中间区域宽度 */
    .column.middle {
        width: 90vw;
    }
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    .downblock{
        display: block;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        flex-direction:column;
        // height: 90%;
        // width:30%;
        //border: 0px solid rgb(230,230,230);
        border-radius: 8px;
        padding: 0;
        border: 0;
    }
    .downblock >>>.ivu-form-item{
        line-height: 0px;
        margin: 0px;
        border: 0px;
        padding: 0px;
        // // margin-bottom: 0px;
        // // margin-right: 0px;
    }
    .downblock >>>.ivu-input-with-prefix{
        padding: 0 0 0 2vw;
        height: 3vh;
        color:black;
    }
    .downblock >>>.ivu-input-default{
        padding: 0 0 0 2.5vw;
        height: 5vh;
    }
    .downblock >>>.ivu-icon {
        padding: 0vh 0 0 0vw;
        font-size: 3vh;
        line-height: 6vh;
        // width: 2vw;
        // height: 2vh;
    }
    .downblock >>>.ivu-form-item-error-tip {
    //     padding-top: 3px;
    //     top: 20%;
    //     left: 240px;
            //display: none;
            position: absolute;
            top: 100%;
            padding: 5px 12px;
            color: #fff;
            background: #FF5555;
            border-radius: 2px;
            z-index: 5;
            white-space: nowrap;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
            box-shadow: 0 0 5px rgba(0,0,0,.2);
            //margin-right:10px;
    }
    .binner{
        display: flex;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        flex-direction:column;
    }
    .login-body-content{
        height: 100%;
        overflow: auto;
    }
    .login-content-item {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        list-style: none;
        font-size: 13px;
    }
    .login-body-content:hover {
        background-color: #97c0ef;
        cursor: pointer;
    }
    .login-text{
        color: rgb(63,113,163);
        font-size:4vh;
        margin:0 0 0 0;
        border: 0;
        padding: 6vh 0 0 0;
    }
    .index-footer-d {
        padding: 0 0 2vh 40vw;
        text-align: center;
        color: #FFFFFF;
        position: fixed;
        bottom: 0;
    }
    .ValidCode{
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        span{
        display: inline-block;
        }
    }
    .myImg {
        border-radius: 4px;
        width: 8.5vw;
        padding-top: 1vh;
        height: 5vh;
            display: inline-block;
            vertical-align: middle;
    }
    .imge_info{

    }
</style>

<template>
    <div style="height:100vh;padding: 0%;background:linear-gradient(to bottom left, #87CEFA ,#6495ED ,#4169E1);background-size:cover;">

		<div class="header" style="background-color:white;height:50px">
			<img style="width: 283.5px;height:30px;margin:10px 0px 0px 40px;cursor: pointer;" @click="clickLogo()" :src="showTarget == 'wutong' ? logoSrcWutong : logoSrcBrace">
		</div>
		<!-- <div>
            <img align="left" style="width:286px;height: 284px;position: fixed;bottom: 0;" :src="logoSrc3">
            <img align="right" style="width:286px;height: 284px;" :src="logoSrc4">
        </div> -->
		<div class="column" style="padding:0 0 0 0;">
			<div class="column side">
				<img align="left" style="width:12vw;height: 24vh;position: fixed;bottom: 0;" :src="logoSrc3">
			</div>
			<div class="column middle">
				<p align="left" style="float:left">
					<img style="width: 36vw;height:27.13125vw;margin:10vh 0 0 10vw;" :src="logoSrc">
				</p>
				<p align="right" style="width:85vw;margin:15vh 0 0 0;">
					<Form v-if='!show' ref="formInline" :model="formInline" :rules="ruleInline" inline class="downblock" style="background:white;width:24vw;padding-bottom:5vh">
						<p align="center" class="login-text">{{showTarget == 'wutong' ? "梧桐大数据" : "梧桐运营支撑系统"}}</p>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem prop="user_number">
								<Input type="text" v-model="formInline.user_number" placeholder="账号" @on-enter="login(formInline)" style="padding:0;width:20vw;height:4vh;line-height:4vh;">
								<Icon type="ios-person-outline" slot="prefix" />
								</Input>
							</FormItem>
						</div>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem prop="password">
								<Input v-model="formInline.password" placeholder="账号密码" @on-enter="login(formInline)" style="width:20vw;height:4vh;line-height:4vh;"
								 type="password" password>
								<Icon type="ios-lock-outline" slot="prefix" />
								</Input>
							</FormItem>
						</div>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem prop="sidentify">
                <Row>
                  
								<i-Col :span="14">
									<Input style="width:11.5vw;height:4vh;" placeholder="请输入验证码" @on-enter="login(formInline)" v-model="code"></Input>
								</i-Col>
								<i-Col :span="10">
									<div class="myImg">
										<img id="servletImg" class="imge_info" style="width: 100%;height: 100%;" src="" @click="changImg()" />
									</div>
								</i-Col>
                </Row>
								<!--                                 <i-Col :span="10">
                                    <div class="ValidCode disabled-select" :style="`width:9vw; height:4vh;padding:2vh 0 0 0;`" @click="refreshCode">
                                        <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
                                    </div>
                                </i-Col> -->
							</FormItem>
						</div>
						<div align="center" style="margin:4vh 0 0 0">
							<FormItem style="">
								<Button type="primary" @click="login(formInline)" style="width:20vw;height:5vh">
									登录
								</Button>
							</FormItem>
						</div>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem style="">
								<Button to="./registered" style="width:20vw;height:5vh">
									<p style="line-height: 5vh;">注册</p>
								</Button>
							</FormItem>
						</div>
						<div align="center" @click="change(true)" style="margin:2vh 0 -3vh 0;cursor:pointer;">
							<p>短信登录</p>
						</div>
					</Form>

					<Form v-else ref="phoneformInline" :model="phoneformInline" :rules="phoneruleInline" inline class="downblock"
					 style="background:white;width:24vw;padding-bottom:5vh">
						<p align="center" class="login-text">{{showTarget == 'wutong' ? "梧桐大数据" : "梧桐运营支撑系统"}}</p>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem prop="phone_number">
								<Input type="text" v-model="phoneformInline.phone_number" placeholder="手机号码" @on-enter="smslogin(phoneformInline)"
								 style="padding:0;width:20vw;height:4vh;line-height:4vh;">
								<Icon type="ios-person-outline" slot="prefix" />
								</Input>
							</FormItem>
						</div>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem prop="sidentify">
								<i-Col :span="14">
									<Input style="width:11.5vw;height:4vh;" placeholder="请输入验证码" @on-enter="login(formInline)" v-model="code"></Input>
								</i-Col>
								<i-Col :span="10">
									<div class="myImg">
										<img id="servletImg" class="imge_info" style="width: 100%;height: 100%;" src="" @click="changImg()" />
									</div>
								</i-Col>
							</FormItem>
						</div>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem prop="code">
								<i-Col :span="14">
									<Input v-model="phoneformInline.code" placeholder="短信验证码" @on-enter="smslogin(phoneformInline)" style="width:11.5vw;height:4vh;line-height:4vh;"
									 type="password" password>
									<Icon type="ios-lock-outline" slot="prefix" />
									</Input>
								</i-Col>
								<i-Col :span="10">
									<div class="ValidCode disabled-select" :style="`width:9vw; height:4vh;padding:2vh 0 0 0;`">
										<span v-show="code_show" @click="getCode" style="cursor: pointer;">获取验证码</span>
										<span v-show="!code_show">{{count}} s</span>
									</div>
								</i-Col>
							</FormItem>
						</div>
						<div align="center" style="margin:4vh 0 0 0">
							<FormItem style="">
								<Button type="primary" @click="smslogin(phoneformInline)" style="width:20vw;height:5vh">
									登录
								</Button>
							</FormItem>
						</div>
						<div align="center" style="margin:2vh 0 0 0">
							<FormItem style="">
								<Button to="./registered" style="width:20vw;height:5vh">
									<p style="line-height: 5vh;">注册</p>
								</Button>
							</FormItem>
						</div>
						<div align="center" @click="change(false)" style="margin:2vh 0 -3vh 0;cursor:pointer;">
							<p>账号登录</p>
						</div>
					</Form>
				</p>
			</div>
			<div class="index-footer-d">京ICP备05002571号 | 中国移动通信版权所有</div>
			<div class="column side">
				<img align="right" style="width:12vw;height: 24vh;position: fixed;right:0" :src="logoSrc4">
			</div>
		</div>

		<div v-if="modal_struct">
			<component v-model="modal_struct" ref="changeApartment"  :dataList="structList" :datamodal="modal_struct" :is="'changeApartment'"
			 :page="'login'"></component>
		</div>
	</div>
</template>


<script>
	import {
		mapMutations
	} from 'vuex';
	import Axios from 'axios'
	import ajax from "../ajax_util"
	import * as types from '../store/types'
	import md5 from 'js-md5'
	import changeApartment from '../base/change_department'
	import SIdentify from '../base/SIdentify'
	import validCode from '../base/validCode'
	import rsa from '../utils/rsa'
	export default {
		components: {
			changeApartment,
			SIdentify,
			validCode,
			rsa
		},
		data() {
			return {
				code_show: true,
				set_time: false,
				count: '',
				timer: '',
				show: false,
				codeList: [],
				length: 4,
				identifyCodes: "1234567890",
				identifyCode: "",
				code: "", //text框输入的验证码logo_main.png
				logoSrc: require('../../static/image/wutong3.png'),
				logoSrcWutong: require('../../static/image/logo_white.png'),
				logoSrcBrace: require('../../static/image/logo3.png'),
				logoSrc3: require('../../static/image/1.png'),
				logoSrc4: require('../../static/image/2.png'),
				formInline: {
					user_number: '',
					password: '',
				},
				phoneformInline: {
					phone_number: '',
					code: '',
					code_back: '',
				},
				ruleInline: {
					user_number: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入账号密码',
						trigger: 'blur'
					}]
				},
				phoneruleInline: {
					phone_number: [{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入短信验证码',
						trigger: 'blur'
					}]
				},
				code: '',
				token: '',
				modal_struct: false,
				structList: [],
				department: "",
				departments: [],
				showTarget: "wutong_brace",
				idcode: ""
			}
		},
		mounted() {
			// this.$store.commit(types.TITLE, 'Login');
			this.createdCode();
			// this.getUuid();
			//this.changImg();
			// this.identifyCode = "";
			// this.makeCode(this.identifyCodes, 4);

		},
		created() {
			this.getUuid();
			this.refreshCode()
			//校验是否需要登录或跳转
			var queryParams = this.$route.query
			if (!this.utils.objectIsEmpty(queryParams.type)) {
				this.validaAfterlogin(queryParams)
			}
		},
		methods: {
			clickLogo(){
				window.open('https://bigdata.10086.cn/wutong/#/home')
			},
			change(sign) {
				if (sign == true) {
					this.show = true
				} else {
					this.show = false
				}
				this.changImg();
			},
			getCode() {
				if (this.phoneformInline.phone_number != '') { // 1.首先判断是否未输入手机号码就点击获取验证码
					if (/^1[345789]\d{9}$/.test(this.phoneformInline.phone_number)) { //2.使用正则判断手机输入的验证码是否符合规范
						if (!this.timer) {
							this.getPhoneCode() // 5.调用后端获取验证码接口的函数
						}
					} else {
						this.$Message.error('手机号格式不正确!');
					}
				} else {
					this.$Message.error('请先填写手机号码!');
				}
			},
			getPhoneCode() {
				//this.$Message.error('暂未开放短信验证功能!');
				var userinfo = {}
				userinfo['phone'] = rsa.cmdRSAEncrypt(this.phoneformInline.phone_number);
				userinfo['code'] = this.code
				userinfo['idcode'] = this.idcode
				var url = this.CONFIG.url_know + '/get-msg';
				var that = this;
				ajax.post({
					url: url,
					that: that,
					data: userinfo,
					success: function(data) {
						const TIME_COUNT = 60; // 3.设置时间为60s
						console.log('getPhoneCode', data)
						if (data == '0') {
							that.$Message.error('该号码不存在，请重新输入!');
							that.changImg();
						} else if (data == '-1') {
							that.$Message.error('验证码不正确，请重新输入!');
							that.changImg();
						} else {
							that.$Message.success('验证码已发送，请查收');
							that.count = TIME_COUNT;
							that.code_show = false; // 4.隐藏获取验证码按钮,展示倒计时模块
							that.timer = setInterval(() => {
								if (that.count > 0 && that.count <= TIME_COUNT) { // 6.设置每秒钟递减
									that.count--;
								} else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
									that.code_show = true;
									clearInterval(that.timer);
									that.timer = null;
								}
							}, 1000)
							//that.changImg();
						}
					}
				})
			},
			validaAfterlogin(queryParams) {
				var target = queryParams.target
				var mainTitle = document.getElementById("title")
				if (target != undefined && target != null && target != "") {
					this.showTarget = target
				}
				if (target == "wutong_brace") {
					mainTitle.innerHTML = "梧桐运营支撑系统"
				} else if (target == "wutong") {
					mainTitle.innerHTML = "梧桐大数据"
				} else {
					mainTitle.innerHTML = "梧桐运营支撑系统"
				}

				var type = queryParams.type
				var toPage = this.getToPage(queryParams)
				if (this.$store.state.token != null && this.$store.state.token != "" && toPage != "") {
					this.checkToken(toPage)
				}
			},
			// 校验token是否有效
			checkToken(toPage) {
				var that = this;
				var url = this.CONFIG.url_know + '/user';
				ajax.get({
					url: url,
					that: that,
					success: function(data) {
						toPage = decodeURIComponent(toPage)
						window.location.href = toPage + "/token?" + that.$store.state.token
					}
				})
            },
            // 获取需要跳转的地址
			getToPage(queryParams){
				var tempUrl = this.utils.changeUrl
				var url = tempUrl.find(e => e.type == queryParams.type)
				if(url != undefined){
					return url.url + queryParams.path
				}else {
					return ""
				}
			},
			Registered() {
				this.$Message.error('注册功能暂未开放，敬请期待！');
			},
			login(formInline) {
				console.log('this.code', this.code)
				console.log('this.identifyCode', this.identifyCode)
				if (this.code == '') {
					this.$Message.error('请输入验证码');
				} else if (this.formInline.user_number === '' || this.formInline.password === '') {
					this.$Message.error('账号或密码不能为空');
				} else {
					var that = this;
					var url = this.CONFIG.url_know + '/login';
					var str = this.formInline.user_number + "|" + md5(this.formInline.password);
					let user = {
						user_number: rsa.cmdRSAEncrypt(str),
						//password:md5(this.formInline.password),
						idcode: this.idcode,
						code: this.code
					};
					console.log('login', user)
					ajax.post({
						url: url,
						that: that,
						data: user,
						success: function(data) {
							console.log('login-------------->', data)
							if (data.code == 200) {
								var toPage = that.$store.state.toPage;
                                that.$store.commit(types.LOGOUT);
                                var queryParams = that.$route.query
								if (!that.utils.objectIsEmpty(queryParams.type)) {
									var toPage = that.getToPage(queryParams)
									console.log("----login-------", toPage);
									toPage = decodeURIComponent(toPage)
									var toIp = toPage + "/token?" + data.token;
									console.log("url ---->", toIp)
									window.location.href = toIp;
								} else {
									console.log("1111111111");
									that.$store.commit(types.TITLE, 'Login');
									that.$store.commit(types.LOGIN, data.token);
									that.modal_struct = true;
									//that.getStruct();
								}
								// var cookieText = "token=" + data.token + "; domain=localhost.test"
								// document.cookie = cookieText;
								var cookieText = "Authorization=" + data.token + "; path=/"
								document.cookie = cookieText;
							} else if (data.code == 403) {
								that.$Message.error('验证码错误或已失效!');
								that.changImg();
								that.code = "";
							} else if (data.code == 423) {
								that.$Message.error('输入密码错误过多,请稍后再试!');
								that.changImg();
								that.code = "";
							} else if(data.code == 424){
								that.$Message.error('该账号已被锁定,请联系相关负责人!');
								that.changImg();
								that.code = "";
							}else if(data.code == 425){
								that.$Message.error('该账号已失效,请联系相关负责人!');
								that.changImg();
								that.code = "";
							}else if (data.code == 402) {
								that.$Message.error('该用户名未配置手机号,请联系相关负责人!');
								that.changImg();
								that.code = "";
							} else if (data.code == 401) {
								that.$Message.error('该用户名不存在或密码错误!');
								that.changImg();
								that.code = "";
							} else {
								that.$Message.error('系统错误!');
							}
						}
					})
				}
			},
			smslogin(phoneformInline) {
				if (phoneformInline.phone_number == '') {
					this.$Message.error('请输入手机号');
				}
				if (phoneformInline.code == '') {
					this.$Message.error('请输入短信验证码');
				}
				if (this.code == '') {
					this.$Message.error('请输入图形验证码');
				} else {
					var myCode = {}
					myCode['phone'] = rsa.cmdRSAEncrypt(this.phoneformInline.phone_number);
					myCode['code'] = this.phoneformInline.code
					console.log('myCode', myCode)
					var url = this.CONFIG.url_know + '/msg-login';
					var that = this;
					ajax.post({
						url: url,
						that: that,
						data: myCode,
						success: function(data) {
							console.log('smslogin', data)
							if (data == '0') {
								that.$Message.error('验证码错误或验证码已过期!')
								that.changImg();
							} else {
								that.$Message.success('可登录');
								var toPage = that.$store.state.toPage;
								that.$store.commit(types.LOGOUT);
								if (toPage != null && toPage != "") {
									console.log("----login-------", toPage);
									toPage = decodeURIComponent(toPage)
									var toIp = toPage + "/token?" + data;
									window.location.href = toIp;
								} else {
									console.log("1111111111");
									that.$store.commit(types.TITLE, 'Login');
									that.$store.commit(types.LOGIN, data);
									that.modal_struct = true;
								}
								var cookieText = "token=" + data + "; path=/"
								document.cookie = cookieText;
							}
						}
					})

				}
			},
			getStruct() {
				this.department = "";
				var that = this;
				var url = this.CONFIG.url_know + '/getLoginStruct/' + this.formInline.user_number;
				ajax.get({
					url: url,
					that: that,
					success: function(data) {
						console.log("-------data----", data);
						that.departments = data;
						var length = data.length;
						if (length == 1) {
							that.$refs.changeApartment.toMainPage(data[0], "login");
						} else if (length == 0) {
							var department = {};
							department.id = 0;
							department.gName = "";
							that.$refs.changeApartment.toMainPage(department, "login");
						} else {
							that.structList = data;
							that.modal_struct = true;
						}
						//console.log('that.modal',that.modal)
					}
				})
			},
			refreshCode() {
				this.createdCode()
			},
			getUuid() {
				this.idcode = (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this
					.S4() + this.S4());
				console.log("====idcode=====", this.idcode);
				this.changImg();
			},
			S4() {
				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			changImg() {
				this.code = ""
				this.utils.delay(() => {
					var img = document.getElementById("servletImg");
					var d = new Date();
					var time = d.getTime(); //如果没有这个
					//下面这一句不会起作用，因为浏览器的缓存技术，图片并不会刷新
					//img.src="/myHelloWeb/servlet/ImageServlet";
					var idcode = this.idcode;
					img.src = this.CONFIG.url_know + "/get-code?" + time + "?" + idcode;
					//?号后面的东西是通过get方式传递的
				}, 300)
			},
			createdCode() {
				let len = this.length,
					codeList = [],
					chars = 'abcdefhijkmnprstwxyz0123456789',
					charsLen = chars.length
				// 生成
				for (let i = 0; i < len; i++) {
					let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
					codeList.push({
						code: chars.charAt(Math.floor(Math.random() * charsLen)),
						color: `rgb(${rgb})`,
						// fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
						fontSize: `5vh`,
						padding: `${[Math.floor(Math.random() * 10)]}px`,
						transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
					})
				}
				// 指向
				this.codeList = codeList
				this.identifyCode = codeList.map(item => item.code).join('')
				console.log('this.identifyCode', this.identifyCode)
				// 将当前数据派发出去
				//this.$emit('update:value', codeList.map(item => item.code).join(''))
			},
			getStyle(data) {
				return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
			}
		},
	}
</script>
